<template>
  <div class="app_container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
            <el-form :inline="true" :model="listQuery" ref="dataList2" class="demo-form-inline">
                <el-form-item>
                    <el-date-picker
                        v-model="listQuery.date"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select filterable v-model="listQuery.label_id" placeholder="请选择房间标签">
                        <el-option
                        v-for="item in labelOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchList">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-row>
      </div>
      <div class="item">
        <el-table v-loading="listLoading" ref="dataList" :data="menuList" style="margin-bottom: 20px;"  border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column prop="date" label="日期" > </el-table-column>
          <el-table-column prop="room_id" label="房间编号" > </el-table-column>
          <el-table-column prop="room_name" label="房间名称" > </el-table-column>
          <el-table-column prop="total" label="新人消费人数" > </el-table-column>
        </el-table>
        <!-- <el-table v-loading="listLoading" ref="dataList" :data="menuList2" style="margin-bottom: 20px;"  border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column prop="date" label="日期" > </el-table-column>
          <el-table-column prop="room_id" label="房间编号" > </el-table-column>
          <el-table-column prop="room_name" label="房间名称" > </el-table-column>
          <el-table-column prop="total" label="房间流水" > </el-table-column>
        </el-table> -->
      </div>
    </el-card>
  </div>
</template>

<script>
import {
    listData,
    listLabelData
} from '@/api/room/roomWater'

export default {
    data(){
        return {
            labelOptions:[],
            listLoading: false,
            total: 0,
            listQuery: {
                date:[],
                label_id:undefined
            },
            menuList: [],
            menuList2: [],
        }
    },
    created(){
        this.getLabelList()
    },
    methods:{
        getLabelList(){
            listLabelData(1).then(response => {
                // response)
                for(let key in response.data){
                    this.labelOptions.push({value:key,label:response.data[key]})
                }
            })
        },
        searchList(){
            this.listQuery.page = 1
            this.getList()
        },
        getList(){
            if(!this.listQuery.date) this.listQuery.date = [];
            if(this.listQuery.date.length !== 2 || !this.listQuery.label_id){
                this.$message({
                    message: '请选择时间和标签',
                    type: 'warning'
                });
                return
            }
            this.listLoading = true
            let urlData = `?start_time=${this.listQuery.date[0]}&end_time=${this.listQuery.date[1]}&label_id=${this.listQuery.label_id}`
            listData(urlData).then(response => {
                this.menuList = response.data.new_list;
                this.menuList2 = response.data.income_list;
                this.listLoading = false
            })
        }
    }
}
</script>

<style scoped>
  [v-cloak] {
      display: none;
  }
  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  .clearfix:after {
      clear: both
  }

  .box-card {
      width: 100%;
  }

  .demo-form-inline {
      float: right;
  }

  /deep/.el-card__header {
        padding-bottom: 0;
    }

    /deep/.el-range-separator {
        width:30px;
    }
</style>
